<template>
  <div style="overflow: hidden">
    <h3 @click="Init">关注</h3>
    <!--{{friends.length}}-->
    <div v-for="friend in friends" class="item">
      <MiniIntroduce :user="friend" class="friend-item" @del="del"></MiniIntroduce>
    </div>
    <div></div>
  </div>
</template>
<script>
  import MiniIntroduce from '@/components/smallComponents/miniintroduce'
  import NavCard from '@/components/smallComponents/navcard'
  import { friendListRead, friendRemove } from '@/public/api'
  import Bus from '../../bus/bus'

  export default {
    components: {MiniIntroduce, NavCard},
    data () {
      return {
        hello: '通讯录',
        friends: []
      }
    },
    methods: {
      del (id) {
        this.$confirm('您是否要删除好友', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          friendRemove({
            friend_id: id,
            user_id: this.User_id
          }).then(
            data => {
              if (data.status) {
                this.$message.success('删除成功')
                this.friends = this.friends.filter(function (value) {
                  console.log(value.id, id)
                  return value.id !== id
                })
              }
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      Init () {
        friendListRead()
          .then(
            data => {
              if (data.status) {
                let content = data.data
                console.log(content)
                this.friends.length = 0
                for (let i = 0; i < content.length; i++) {
                  this.friends.push({
                    id: content[i].friend_basic.user_id,
                    name: content[i].friend_basic.name,
                    avatar: content[i].friend_basic.avatar,
                    follow: i,
                    group: i,
                    moment: i
                  })
                }
              }
            }
          )
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    },
    created () {
      this.Init()
      Bus.$on('loadMore', () => {
        console.log('朋友列表加载更多')
      })
    },
    beforeDestroy () {
      Bus.$off('loadMore')
    },
    watch: {
      User_id (old, newval) {
        this.Init()
      }
    }
  }
</script>
<style scoped>
  .friend-item {
    border-radius: 5px;
    transform: scale(1);
    /*transition: transform .2s ease-in;*/
  }

  .friend-item:hover {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
    transform: scale(1.005);
    /*transition: transform .2s ease-in;*/
  }

  .item {
    margin: 1.6em;
    float: left;
  }

</style>
